<template>
<!-- :[attr]动态class属性 -->
<!-- v-bind 不改变这个数，只接受父元素传过来的数据  相当于静态-->
  <input class="hmInput"  
  :[attr]="{success:isOK,err:!isOK}" 
  v-bind:value="value" 
  @blur="blurFn" 
  @input="inputFn" > 
</template>

<script>
export default {
    data(){
        return{
            //isOK静态不能写死，涉及到axios发送
            isOK:'',
            attr:''
        }
    },
    props:{
        value:String,
        reg:{
            type:RegExp
        },
        user:{
            type:Object
        }
    },
    created(){
        if(this.reg.test(this.value)){
                this.isOK = true
            }else{
                this.isOK = false
            }
    },
    methods:{
        //输入框失去焦点事件
        blurFn(){
            console.log(31,this.value);
            this.attr = 'class'
            //正则由外部传入
            // let reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
            if(this.reg.test(this.value)){
                //输入正确，边框变绿，否则变红
                this.isOK = true
            }else{
                //使用vant组件库的轻提示，因为全局引入，绑定到Vue上面的，使用的话要用this,且Toast.fail('失败文案');改成$toast.fail('内容输入不正确');,注意t变小写
                this.$toast.fail('内容输入不正确');
                this.isOK = false
            }
        },
        inputFn(e){
            //通过事件对象获取value值
           console.log(e.target.value); 
           this.$emit('input',e.target.value)
        }
    }
}
</script>

<style lang="less" scoped>
.hmInput{
  width: 100%;
  padding: 10px 5px;
  border:none;
  border-bottom:2px solid #ddd;
}
.success{
    color:green;
    border-color: green;
}
.err{
    color:red;
    border-color: red;
}
</style>